<template>
  <div class="count">
    <h2>当前求和为：{{ sum }}</h2>
    <h2>和放大10被：{{ bigSum }}</h2>
    <h3>欢迎:{{ countStore.title }}，来到：{{ countStore.address }}</h3>
    <h3>欢迎:{{ upperTitle }}，来到：{{ countStore.address }}</h3>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">加</button>
    <button @click="minus">减</button>
  </div>
</template>
<!--
    借助`storeToRefs`将`store`中的数据转为`ref`对象，方便在模板中使用。
    注意：`pinia`提供的`storeToRefs`只会将数据做转换，而`Vue`的`toRefs`会转换`store`中数据。
-->

<script setup lang="ts" name="Count">
// 引入useCountStore
import { useCountStore } from '@/store/count'
import { storeToRefs } from 'pinia';
import { ref } from 'vue';

// 使用useCountStore，得到一个专门保存count相关的store
const countStore = useCountStore()
/* 使用storeToRefs转换countStore，随后解构 */
const { sum, bigSum, upperTitle } = storeToRefs(countStore)
// 数据
let n = ref(1) // 用户选择的数字
// 方法
function add() {
  countStore.increment(n.value)
}
function minus() {
  countStore.sum -= n.value
}
</script>

<style scoped>
.count {
  background-color: skyblue;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
}

select,
button {
  margin: 0 5px;
  height: 25px;
}
</style>